<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>{:config('enianAdmin.logo_title')}</title>
  <meta name="description" content="particles.js is a lightweight JavaScript library for creating particles.">
  <meta name="author" content="Vincent Garreau" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
  <link rel="stylesheet" media="screen" href="/static/admin/src/login/css/style.css">
  <link rel="stylesheet" type="text/css" href="/static/admin/src/login/css/reset.css"/>
  <link rel="stylesheet" type="text/css" href="/static/layui/src/css/layui.css" />
  <style type="text/css">
  	body{
  		background: dimgray;
  	}
  </style>
</head>
<body >

<div id="particles-js" class="layui-unselect">
		<div class="login">
			<div class="login-top">
				{:config('enianAdmin.logo_title')} 登录 
			</div>
			<form >
				<div class="login-center clearfix">
					<div class="login-center-img"><img src="/static/admin/src/login/img/name.png"/></div>
					<div class="login-center-input">
						<input type="text" id='username' name="username" value="" placeholder="请输入您的用户名" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的用户名'"/>
						<div class="login-center-input-text">用户名</div>
					</div>
				</div>
				<div class="login-center clearfix">
					<div class="login-center-img"><img src="/static/admin/src/login/img/password.png"/></div>
					<div class="login-center-input">
						<input type="password" id='password' name="password" value="" placeholder="请输入您的密码" onfocus="this.placeholder=''" onblur="this.placeholder='请输入您的密码'"/>
						<div class="login-center-input-text">密码</div>
					</div>
				</div>
				<div class="login-center clearfix">
					<div class="login-center-img"><img src="/static/admin/src/login/img/yzm.png"/></div>
					<div class="login-center-input">
						<input type="text" id='yzm' name="verify" value="" placeholder="请输入验证码" onfocus="value=value.replace(/[^/w/.//]/ig,'')" onblur="this.placeholder='请输入您的验证码'"/>
						<div class="login-center-input-text">验证码</div>
					</div>
				</div>
				<div class="login-button">
					登录
				</div>
				
			</form>

		</div>
		<div class="sk-rotating-plane"></div>
</div>
<script id="tpl_yzm" type="text/html">
	
	<div><img src="{:url('index/verify')}" alt="captcha" onclick="this.src='{:url('index/verify')}?seed='+Math.random()" height="42" id="captcha" />
	</div>
	
</script>
<!-- scripts -->
<script src="/static/layui/layui.js"></script>
<script src="/static/admin/src/login/js/particles.min.js"></script>
<script src="/static/admin/src/login/js/app.js"></script>
<script type="text/javascript">
	
	
	if (top.location != location) {
			top.location.href = location.href; 
	} 
	
	var $;
	layui.use(['laytpl','layer'],function(){
		var laytpl = layui.laytpl;
		$ =layui.$;
		var layer =layui.layer;
		$("#yzm").focus(function(){
			laytpl(tpl_yzm.innerHTML).render({}, function(html){
				layer.tips(html, '#yzm', {
				  tips: [2,'#393D49']
				  ,time:0
				});
			});
			
		})
		
		
		$("#yzm").blur(function(){
			layer.closeAll()
		})
			
			
		function hasClass(elem, cls) {
		  cls = cls || '';
		  if (cls.replace(/\s/g, '').length == 0) return false; //当cls没有参数时，返回false
		  return new RegExp(' ' + cls + ' ').test(' ' + elem.className + ' ');
		}
		 
		function addClass(ele, cls) {
		  if (!hasClass(ele, cls)) {
		    ele.className = ele.className == '' ? cls : ele.className + ' ' + cls;
		  }
		}
		
		function login(){
	//		alert("登录成功")
	//		console.log($('#yzm'));
	//		console.log($('#yzm').val());
	//		console.log($('#yzm').attr('value'));
			var data = {};
		  	var t = $('form').serializeArray();
			$.each(t, function() {
		     	data[this.name] = this.value;
		    });
			$.ajax({
				type:"post",
				url:"{:url('',['type'=>1])}",
				data:data,
				async:true,
				success:function(data){
					if(data.code==1){
						layer.msg('登录成功');
						location.href="{:url('index/index')}"
					}else{
						layer.alert('登录失败,'+data.msg);
					}
					
				}
				
			});
		}
		
		function removeClass(ele, cls) {
		  if (hasClass(ele, cls)) {
		    var newClass = ' ' + ele.className.replace(/[\t\r\n]/g, '') + ' ';
		    while (newClass.indexOf(' ' + cls + ' ') >= 0) {
		      newClass = newClass.replace(' ' + cls + ' ', ' ');
		    }
		    ele.className = newClass.replace(/^\s+|\s+$/g, '');
		  }
		}

		$(".login").bind("keydown",function(e){
		        
		    var theEvent = e || window.event;    
		    var code = theEvent.keyCode || theEvent.which || theEvent.charCode;    
		    if (code == 13)login()
		});
		document.querySelector(".login-button").onclick = function(){
			
				addClass(document.querySelector(".login"), "active")
				
				setTimeout(function(){
					
					addClass(document.querySelector(".sk-rotating-plane"), "active")
					document.querySelector(".login").style.display = "none"
				},800)
				setTimeout(function(){
					removeClass(document.querySelector(".login"), "active")
					removeClass(document.querySelector(".sk-rotating-plane"), "active")
					document.querySelector(".login").style.display = "block"

					login()
				},1000)
		}
		
			
		})
	
		
		
		
</script>

</body>
</html>